<!--图片预览-->
<template>
  <ele-modal
    v-if="data"
    width="460px"
    :visible="visible"
    :append-to-body="true"
    :close-on-click-modal="true"
    custom-class="ele-dialog-form"
    :title="data.fileName"
    @update:visible="updateVisible"
  >
      <el-image class="preview-img" :src="data.url.split('?')[0]" v-if="data"></el-image>
  </ele-modal>
</template>

<script>

    export default {
      name: "preview-img",
      props: {
        // 弹窗是否打开
        visible: Boolean,
        // 文件数据
        data: Object
      },
      data() {
        return {}
      },
      created() {
        console.log('图片预览弹框created============')
      },
      methods: {
        /* 更新 visible */
        updateVisible(value) {
          this.$emit('update:visible', value);
        }
      }
    }
</script>

<style scoped>
  /deep/ .ele-dialog-form .el-dialog__body {
    padding-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
   }
  .preview-img{
    width: 300px;
  }
</style>
